<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const orderDetails = ref([
{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    },{
        domain: 'www.baidu.com',
        serialNumber: '123456',
        duration: '1年',
        type: '域名',
        subtotal: '100',
        unitPrice: '100',
        status: '待支付',
    }
])

const openDialog = () => {
  ElMessageBox.confirm(
    '<span style="color: #ff0000;">域名价格可能会有所变化，且该域名可能无法再次购买。</span> <span style="color: #999999;">确认取消订单吗？</span>',
    '您即将关闭此订单',
    {
      confirmButtonText: '再想想',
      cancelButtonText: '取消订单',
      type: 'warning',
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
        console.log('111111')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消提交',
      })
    })
}
const countdown = ref(Date.now() + 1000 * 60 * 60 * 7)
const stepValue = ref(3)

import { useRoute } from 'vue-router'
const route = useRoute()
const status = ref('')

onMounted(() => {
  status.value = route.query.status as string || ''
  if (status.value === '处理中') {
    
  }
})


</script>
<template>
    <div class="container">
        <div class="bs-panel">
            <div class="bs-panel-body">
                <div class="bs-panel_hd">
                    <div class="bs-panel_left">
                        <div class="bs-panel_tt bold">订单列表</div>
                        <div class="bs-panel_desc">订单号2411281753417353</div>
                    </div>
                    <div class="bs-panel_right">
                        <el-link type="info">返回订单列表</el-link>
                    </div>
                </div>
                <div style="padding: 30px 100px;">
                    <div class="page-steps">
                        <div class="step-item" :class="{ 'active': stepValue >= 1 }">
                            <div class="step-flex">
                                <div class="step-item-title">1</div>
                                <div class="step-item-desc">创建订单</div>
                            </div>
                            <div class="step-time">2024-11-18 09:37:35</div>
                        </div>
                        <div class="step-item" :class="{ 'active': stepValue >= 2 }">
                            <div class="step-flex">
                                <div class="step-item-title">2</div>
                                <div class="step-item-desc">付款到190</div>
                            </div>
                            <div class="step-time">2024-11-18 09:37:35</div>
                        </div>
                        <div class="step-item" :class="{ 'active': stepValue >= 3 }">
                            <div class="step-flex">
                                <div class="step-item-title">3</div>
                                <div class="step-item-desc">处理订单</div>
                            </div>
                            <div class="step-time"></div>
                        </div>
                        <div class="step-item" :class="{ 'active': stepValue >= 4 }">
                            <div class="step-flex">
                                <div class="step-item-title">4</div>
                                <div class="step-item-desc">订单完成</div>
                            </div>
                            <div class="step-time"></div>
                        </div>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <div class="status-panel" :class="{ 'status-panel-success': status === '已完成' }">
                                <div class="status-panel_head">
                                    <div class="status-tit">
                                        <el-icon color="#4B9E52" size="26" v-if="status === '已完成'" ><SuccessFilled /></el-icon>
                                        <el-icon color="#ef813e" size="26" v-else-if="status === '待付款'"><WarningFilled /></el-icon>
                                        <el-icon color="#000" size="26" v-else-if="status === '处理中'"><Loading /></el-icon>
                                        <span>订单状态:{{ status }}</span>
                                    </div>
                                    <el-link type="info">取消订单</el-link>
                                </div>
                                <div class="status-panel_body">
                                    <div class="status-panel_content">
                                        <div class="status-tit">请注意</div>
                                        <div class="status-label" v-if="status === '待付款'">
                                            您还有 <el-countdown title=" " value-style="color: #ff0000; font-size: 14px; padding:0 6px" :value="countdown" /> 秒可以完成付款，超时后订单将自动关闭。请及时处理。
                                        </div>
                                        <div class="status-label" v-else-if="status === '处理中'">
                                            您的订单正在处理中，我们会尽快为您完成操作。感谢您的耐心等待！
                                        </div>
                                        <div class="status-label" v-else-if="status === '已完成'">
                                            您的订单已成功完成！感谢您的支持，如需进一步帮助，请随时联系我们。
                                        </div>
                                    </div>
                                </div>
                                <div class="status-panel_foot" v-if="status != '已完成'">
                                    <el-button type="primary" size="large" >立即付款</el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="10">
                            <div class="orders-panel">
                                <div class="bs-panel_hd">
                                    <div class="bs-panel_tt bold">订单金额</div>
                                </div>
                                <div class="order-preview">
                                    <div class="order-preview_item order-preview_item_total">
                                        <span class="preview_item_tt">订单总价：</span>
                                        <span class="preview_item_value">¥ 470</span>
                                    </div>
                                    <div class="order-preview_item">
                                        <span class="preview_item_tt">优惠金额：</span>
                                        <span class="preview_item_value">¥ 3</span>
                                    </div>
                                    <div class="order-preview_item">
                                        <span class="preview_item_tt">未使用优惠券</span>
                                        <span class="preview_item_value">¥ 2</span>
                                    </div>
                                </div>
                                <div class="total-foot">
                                    <span class="total-foot_value">¥ 470</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="detail-panel">
                        <div class="bs-panel_hd">
                            <div class="bs-panel_tt bold">商品明细</div>
                        </div>
                        <el-table :data="orderDetails" style="width: 100%">
                            <el-table-column prop="serialNumber" label="序号" align="center"/>
                            <el-table-column prop="domain" label="域名" align="center"  />
                            <el-table-column prop="duration" label="时长" align="center"/>
                            <el-table-column prop="type" label="类型" align="center"/>
                            <el-table-column prop="subtotal" label="小计" align="center"/>
                            <el-table-column prop="unitPrice" label="单价" align="center"/>
                            <el-table-column prop="status" label="状态" align="center"/>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.step-flex{
    display: flex;
    align-items: center;
}
.status-tit{
    display: flex;
    align-items: center;
    span{
        margin-left: 10px;
    }
}
.status-label{
    display: flex;
    flex-wrap: wrap;
    line-height: 28px;
    color: #888;
    ::v-deep .el-statistic{
        height: 26px;
        line-height: 26px;
    }
    ::v-deep .el-statistic__head{
        display: none;
    }
}
.status-panel_content{
    .status-tit{
        font-weight: bold;
        margin-bottom: 10px;
    }
}
.status-panel_foot{
    text-align: center;
    margin-top: 20px;
    .el-button{
        width: 200px;
    }
}
.status-panel_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .status-tit{
        font-weight: bold;
    }
    .status-cancel{
        color: #ef813e;
    }

}
.status-panel_body{
    padding:15px 20px;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 231, 1);
    border-radius: 10px;
    
}



.status-panel{
    height: 220px;
    background: inherit;
    background-color: rgba(230, 143, 54, 0.14901960784313725);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 231, 1);
    border-radius: 10px;
    padding: 20px;
}
.status-panel-success{
    background-color: rgba(137, 236, 62, 0.14901960784313725);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 231, 1);
}


.orders-panel{
    height: 220px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 231, 1);
    border-radius: 10px;
    .order-preview_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        color: #999;
    }
    .order-preview_item_total{
        color: #000;
    }
    .total-foot{
        text-align: right;
        border-top: 1px solid rgba(228, 228, 231, 1);
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        color: #ef813e;
        font-size: 24px;
    }
}
.detail-panel{
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 231, 1);
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
    .bs-panel_hd{
        padding: 0 10px;
    }
}
.price-value{
    color: #ef813e;
    font-size: 16px;
}
.w-1{
    width: 322px;
    text-align: center;
}
.w-2,.w-3{
    width: 142px;
    text-align: center;
}
.w-4,.w-5,.w-6{
    width:200px;
    text-align: center;
}
.w-1-1{
    width: 156px;
    text-align: center;
}


.page-steps {
  display: flex;
  justify-content: center;
    margin-bottom: 30px;
  .step-item {
    position: relative;
    padding-right: 100px;
    color: #999;
    margin: 0 10px;
    &:last-child {
      padding-right: 0;
    }

    &::before {
      content: '';
      position: absolute;
      top: 32%;
      left: 100px;
      width: 130px;
      height: 1px;
      background-color: #d3d7dc;
    }

    &:last-child::before {
      display: none;
    }
    .step-time{
        width: 120px;
        height: 20px;
        color: #999;
        font-size: 12px;
    }
    .step-item-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border: 1px solid #d3d7dc;
      color: #d3d7dc;
      border-radius: 50%;
      margin-right: 6px;
    }
  }

  .step-item.active {
    color: #e68f36;
    &::before {
      background-color: #e68f36;
    }
    .step-item-title {
      border-color: #e68f36;
      background-color: #e68f36;
      color: #fff;
    }
  }
}


</style>
